<template>
  <div>
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
    />
    <ul class="his">
      <li
        v-show="item.length < 5"
        v-for="(item, index) in history"
        :key="index"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  // 调用子组件
  components: {},
  data() {
    return {
      value: "",
      history: [],
    };
  },
  mounted() {
    this.history = this.$store.state.history;
    console.log(this.history);
  },
  // 事件方法
  methods: {
    onSearch(val) {
      if (this.value.trim() != "") {
        this.$store.commit("add", val);
        console.log(val);
      }
      this.$router.push({ name: "Home", query: { val } });
    },
  },
};
</script>
<style lang="scss" scoped>
.his {
  width: 100%;
  height: 100%;
  display: flex;

  flex-wrap: wrap;

  li {
    text-align: center;
    width: 20%;
    background: darkcyan;
    font-size: 0.3rem;
    margin: 20px;
  }
}
</style>
